<template>
    <div class="wrap">
        <a href="#" class="top-ad"><img src="http://172.16.40.70/shop/images/list-ban01.png"/></a>
        <van-grid :border="false">
            <van-grid-item @click="toDetail(2)">
                <van-image src="https://img.yzcdn.cn/vant/apple-1.jpg"/>
                <van-txt>
                    <p class="good-name">慕斯不知道什么蛋糕</p>
                    <p class="good-desc">慕斯不知道什么蛋糕慕斯不知慕斯不知道什么蛋糕慕斯不知道什么蛋糕道什么蛋糕</p>
                    <p class="good-price">￥2699.00</p>
                    <p class="good-buy">
                        <van-button color="#FC605A" size="small">立即购买</van-button>
                    </p>
                </van-txt>
            </van-grid-item>
            <van-grid-item>
                <van-image src="https://img.yzcdn.cn/vant/apple-2.jpg"/>
                <van-txt>
                    <p class="good-name">慕斯不知道什么蛋糕</p>
                    <p class="good-desc">慕斯不知道什么蛋糕慕斯不知道什么蛋糕</p>
                    <p class="good-price">￥2699.00</p>
                    <p class="good-buy">
                        <van-button color="#FC605A" size="small">立即购买</van-button>
                    </p>
                </van-txt>
            </van-grid-item>
            <van-grid-item>
                <van-image src="https://img.yzcdn.cn/vant/apple-3.jpg"/>
                <van-txt>
                    <p class="good-name">慕斯不知道什么蛋糕</p>
                    <p class="good-desc">慕斯不知道什么蛋糕慕斯不知道什么蛋糕</p>
                    <p class="good-price">￥2699.00</p>
                    <p class="good-buy">
                        <van-button color="#FC605A" size="small">立即购买</van-button>
                    </p>
                </van-txt>
            </van-grid-item>
            <van-grid-item>
                <van-image src="https://img.yzcdn.cn/vant/apple-3.jpg"/>
                <van-txt>
                    <p class="good-name">慕斯不知道什么蛋糕</p>
                    <p class="good-desc">慕斯不知道什么蛋糕慕斯不知道什么蛋糕</p>
                    <p class="good-price">￥2699.00</p>
                    <p class="good-buy">
                        <van-button color="#FC605A" size="small">立即购买</van-button>
                    </p>
                </van-txt>
            </van-grid-item>
        </van-grid>
    </div>
</template>
<script>
	export default {
		created: function () {
			this.$emit('header', 0)
			this.$emit('footer', 0)
			this.$emit('active', 'category')
		},
		methods: {
			toDetail: function (id) {
				this.$router.push('detail/'+id);
			}
		}
	}
</script>
<style scoped>
    .wrap {
        padding: 2.4rem 0 0rem;
    }

    .top-ad {
        overflow: hidden;
        display: inline-block
    }

    .top-ad img {
        width: 100%;
        float: left;
    }

    .van-grid-item {
        width: 47%;
        margin-bottom: 0.3rem;
        margin-top: 0.2rem;
    }

    .van-grid-item:nth-child(odd) {
        margin-right: 1%;
        margin-left: 2%;
    }

    .van-grid-item:nth-child(even) {
        margin-left: 1%;
    }

    van-txt {
        width: 100%;
        overflow: hidden;
        padding-top: 0.5rem;
    }

    van-txt p {
        text-align: center;
        margin: 0.3rem;
        word-wrap: break-word;
        white-space: nowrap
    }

    van-txt p.good-name {
        color: #000000;
        font-size: 0.9rem;
    }

    van-txt p.good-desc {
        color: #333333;
        font-size: 0.7rem;
    }

    van-txt p.good-price {
        color: #FC605A;
        font-weight: bold;
    }

    van-txt p.good-buy {
        margin-top: 0.8rem;
    }

    van-txt p.good-buy button {
        padding: 0 1rem;
    }
</style>
